﻿<Page
    x:Class="LinkPad.DiagramPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.TopAppBar>
        <AppBar IsOpen="True" Name="MainAppBar">
            <AppBar.Resources>
                <Style TargetType="RadioButton">
                    <Setter Property="Margin" Value="18"></Setter>
                </Style>
                <Style TargetType="Button">
                    <Setter Property="Margin" Value="18"></Setter>
                </Style>
            </AppBar.Resources>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0" FlowDirection="LeftToRight" Orientation="Horizontal">
                    <RadioButton Name="RdPan">Pan</RadioButton>
                    <RadioButton Name="RdText">Text</RadioButton>
                    <RadioButton Name="RdImage">Image</RadioButton>
                    <RadioButton Name="RdLink">Link</RadioButton>
                    <RadioButton Name="RdFreehand">Freehand</RadioButton>
                    <RadioButton Name="RdEdit">Edit</RadioButton>
                    <RadioButton Name="RdEraser">Erase</RadioButton>
                </StackPanel>
                <StackPanel Grid.Column="1" FlowDirection="RightToLeft" Orientation="Horizontal">
                    <!-- Color Picker -->
                    <Button Name="ColorPickerButton" Content="Choose Color" FlowDirection="LeftToRight">
                        <Button.Flyout>
                            <Flyout>
                                <Grid Width="320" Height="240" Name="ColorPickerGrid">
                                    <!-- For now we only provide limited colour choices -->
                                    <Grid.Resources>
                                        <Style TargetType="Button">
                                            <Setter Property="Margin" Value="5"/>
                                            <Setter Property="HorizontalAlignment" Value="Stretch"/>
                                            <Setter Property="VerticalAlignment" Value="Stretch"/>
                                        </Style>
                                    </Grid.Resources>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*"/>
                                        <RowDefinition Height="*"/>
                                        <RowDefinition Height="*"/>
                                    </Grid.RowDefinitions>
                                    <Button Grid.Row="0" Grid.Column="0" Background="Red"/>
                                    <Button Grid.Row="0" Grid.Column="1" Background="Orange"/>
                                    <Button Grid.Row="0" Grid.Column="2" Background="Yellow"/>
                                    <Button Grid.Row="0" Grid.Column="3" Background="Green"/>
                                    <Button Grid.Row="1" Grid.Column="0" Background="DarkCyan"/>
                                    <Button Grid.Row="1" Grid.Column="1" Background="Blue"/>
                                    <Button Grid.Row="1" Grid.Column="2" Background="Purple"/>
                                    <Button Grid.Row="1" Grid.Column="3" Background="DeepPink"/>
                                    <Button Grid.Row="2" Grid.Column="0" Background="Lime"/>
                                    <Button Grid.Row="2" Grid.Column="1" Background="DarkBlue"/>
                                    <Button Grid.Row="2" Grid.Column="2" Background="Gray"/>
                                    <Button Grid.Row="2" Grid.Column="3" Background="Black"/>
                                </Grid>
                            </Flyout>
                        </Button.Flyout>
                    </Button>
                    <!-- Font Size Picker -->
                    <Button Name="FontSizePickerButton" Content="Font Size" FlowDirection="LeftToRight">
                        <Button.Flyout>
                            <Flyout>
                                <Grid Width="60">
                                    <Grid.RowDefinitions>
                                        <RowDefinition/>
                                        <RowDefinition Height="200"/>
                                    </Grid.RowDefinitions>
                                    <TextBox Name="TextFontSize" Grid.Row="0"/>
                                    <ListBox Name="ListFontSizes" Grid.Row="1"/>
                                </Grid>
                            </Flyout>
                        </Button.Flyout>
                    </Button>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.TopAppBar>
    <Page.BottomAppBar>
        <AppBar>
            <AppBar.Resources>
                <Style TargetType="RadioButton">
                    <Setter Property="Margin" Value="18"></Setter>
                </Style>
                <Style TargetType="Button">
                    <Setter Property="Margin" Value="18"></Setter>
                </Style>
            </AppBar.Resources>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Horizontal" FlowDirection="LeftToRight" Grid.Column="0">
                    <Button Name="BtnToMain" Content="Back To Main" Width="150"/>
                    <Button Name="BtnSave" Content="Save" Width="100"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="100"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="60"/>
            <RowDefinition Height="60"/>
            <RowDefinition Height="60"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Canvas Name="MainCanvas" Background="White" Grid.ColumnSpan="2" Grid.RowSpan="6"
                HorizontalAlignment="Left" VerticalAlignment="Top" Margin ="0,0,0,0"/>
        <Grid Grid.Column="1" Grid.Row="1" Width="50" Height="50" Background="Black">
            <Button Name="BtnZoomIn" 
                        Foreground="Black" Background="DarkBlue" BorderBrush="Black" Width="50" Height="50"
                        Content="+" FontSize="20" FontWeight="Bold" FontFamily="Fixesys"/>
        </Grid>
        <Grid Grid.Column="1" Grid.Row="2"  Width="50" Height="50" Background="Black">
            <Button Name="BtnFitAll" 
                        Foreground="Black" Background="DarkBlue" BorderBrush="Black" Width="50" Height="50"
                        Content="F" FontSize="20" FontWeight="Bold" FontFamily="Fixesys"/>
        </Grid>
        <Grid Grid.Column="1" Grid.Row="3" Width="50" Height="50" Background="Black">
            <Button Name="BtnZoomOut" 
                        Foreground="Black" Background="DarkBlue" BorderBrush="Black" Width="50" Height="50"
                        Content="-" FontSize="20" FontWeight="Bold" FontFamily="Fixesys"/>
        </Grid>
    </Grid>
</Page>